@import "theme";

html, body{
	margin:0;
}
body{
    background:#f0f0f0;
    font-size:14px;
}
body,input,button,textarea{
	font-family:-apple-system, "Helvetica Neue", Arial, "PingFang SC", "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
	color:#222;
}
*{outline:none;box-sizing:border-box;}
img{
	border:none;
}
a {
	text-decoration: none;
}
button{
	padding:4px 8px;
	font-size:13px;
	background:none;
	border:none;
	background: linear-gradient(#4DB1FE, #4aadFa);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-radius:3px;
	color:#fff;
	
	&:hover {
		cursor: pointer;
	}
	&[disabled]{
		opacity: .3;
	}
}

input:not([type]), 
input[type="email"],
input[type="number"], 
input[type="password"], 
input[type="tel"], 
input[type="url"], 
input[type="text"],
input[type="date"],
input[type="datetime"],
select,
textarea{
	padding:8px 10px;
	box-sizing:border-box;
	border-radius:3px;
	border:1px solid #dbdbdb;
}

label{
	margin:0;
	padding:0;
}
table{
	border-collapse: collapse;
    th{
        font-weight:normal;
    }
	td,th{
		padding:3px;
	}
}

.hide{
    display:none;
}

.loading{
    position:relative;
    &:after{
        content:"";
        display:block;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:url(../imgs/loading.svg) no-repeat center center #fff;
    }
}

.help{
    display:inline-block;
    vertical-align:middle;
    top:-1px;
    height:18px;
    width:18px;
    position:relative;
    z-index:10;
    overflow:hidden;
    border-radius:50%;
    background:#ddd;
    text-align:center;
    
    &:before{
        position:relative;
        content:"?";
        display:block;
        margin:0 auto;
    }
    
    &:hover{
        overflow:visible;
    }
    
    &:after{
        display:block;
        content:"";
        border:1px solid #dbdbdb;
        border-right:none;
        border-top:none;
        background:#f5f5f5;
        width:10px;
        height:10px;
        position:absolute;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        left:20px;
        box-sizing:border-box;
        top:4px;
        z-index:10;
    }
    
    .help_content{
        border:1px solid #dbdbdb;
        padding:5px 6px;
        font-size:14px;
        min-width:100px;
        position:absolute;
        left:25px;
        top:-7px;
        color:#555;
        text-align:left;
        background: #f5f5f5;
        border-radius:3px;
        box-shadow:0px 3px 10px rgba(0, 0, 0, 0.3);
    }
}

.tip {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	z-index: 10;
	overflow: hidden;
	text-align: center;
	text-align: center;
	&:hover {
		overflow: visible;
		z-index: 11;
	}
	.tip_content {
		border: 1px solid #dbdbdb;
		padding:0.4em 0.8em;
		font-size: 0.6em;
		position: absolute;
		white-space: nowrap;
		top: 100%;
		margin: 0 auto;
		left: 50%;
		transform: translate(-50%, 7px);
		color: #555;
		text-align: left;
		background: #f5f5f5;
		border-radius: 3px;
		box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
		
		&:before{
			position: absolute;
			display: inline-block;
			left: 0;
			right: 0;
			margin: 0 auto;
			z-index: 10;
			content: "";
			border: 1px solid #dbdbdb;
			border-right: none;
			border-top: none;
			background: #f5f5f5;
			width: 9px;
			height: 9px;
			bottom:100%;
			-webkit-transform: rotate(135deg) translate(3px -3px);
			-moz-transform: rotate(135deg) translate(3px -3px);
			-ms-transform: rotate(135deg) translate(3px, -3px);
			-o-transform: rotate(135deg) translate(3px, -3px);
			transform: rotate(135deg) translate(3px, -3px);
		}
		&:after{
			content:"";
			position:absolute;
			left:0;
			top:-10px;
			width:100%;
			height:12px;
		}
	}
}

.block{
    margin-bottom:15px;
    background:#fff;
    padding:15px;
}

footer{
    background:#666;
    padding:40px 15px;
    width:1100px;
    margin:0 auto;
}
